<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>庄海鑫前端工程师简历</title>
    <link rel="stylesheet" href="../dist/css/swiper.min.css">
    <link rel="stylesheet" href="../dist/css/index.css">
    <link rel="stylesheet" href="../dist/css/loading.css">
    <link rel="stylesheet" href="../dist/css/sticky.css">
    <link rel="stylesheet" href="../dist/css/animate.css">
    <script src="../dist/js/swiper.min.js"></script>


    <style type="text/css">
        /*.icon {*/
        /*width: 1em;*/
        /*height: 1em;*/
        /*vertical-align: -0.15em;*/
        /*fill: currentColor;*/
        /*overflow: hidden;*/
        /*}*/

        .site-welcome {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #efefef;
            z-index: 1;
            justify-content: center;
            align-items: center;
        }

        .site-welcome.active {
            display: flex;
        }
    </style>
</head>
<body>
<div id="siteWelcome" class="site-welcome active">
    <div class="loading"></div>
</div>
<div class="topNavBar " id="topNavBar">
    <div class="topNavBar-inner clearfix">
        <a class="logo" href="#" alt="log">
            <span class="rs">RS</span><span class="card">card</span></a>
        <nav class="menu">
            <ul class="clearfix">
                <li><a href="#siteAbout">关于</a></li>
                <li><a href="#siteSkills">技能</a></li>
                <li class="menuTrigger">
                    <a href="#siteWorks">作品</a>
                    <ul class="subMenu">
                        <li><a>作品1</a></li>
                        <li><a>作品2</a></li>
                        <li><a>作品3</a></li>

                    </ul>
                </li>
                <li><a href="#siteMessage">留言板</a></li>
                <li class="menuTrigger">
                    <a href="#siteBlogs">博客</a>
                    <ul class="subMenu">
                        <li><a>博客1</a></li>
                        <li><a>博客2</a></li>
                        <li><a>博客3</a></li>
                    </ul>

                </li>
                <li><a href="#siteCalender">日历</a></li>
                <li><a href="#siteContact">联系方式</a></li>
                <li><a href="#siteOther">其他</a></li>

            </ul>
        </nav>
    </div>
</div>
<div class="banner">
    <div class="mask">
    </div>
</div>

<main>
    <div data-x class="userCard " id="siteAbout">
        <div class="pictureAndText clearfix">
            <div class="picture">
                <img src="../dist/image/avatar.PNG " alt="头像" width="380px">
            </div>
            <div class="profile">
          <span class="welcome">Hello
            <span class="triangle"></span>
          </span>

                <h1>庄海鑫</h1>
                <h2>前端开发工程师</h2>
                <hr>
                <dl>
                    <dt>年龄</dt>
                    <dd>21</dd>
                    <dt>所在城市</dt>
                    <dd>深圳</dd>
                    <dt>邮箱</dt>
                    <dd>649308293@qq.com</dd>
                    <dt>手机</dt>
                    <dd>13604903685</dd>
                    <dt>GitHub</dt>
                    <dd>https://github.com/zhuanghaixin</dd>
                </dl>
            </div>
        </div>
        <footer class="meida">
            <a href="">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            </a>
            <a href="">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weibo"></use>
                </svg>
            </a>
            <a href="">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weixin-copy"></use>
                </svg>
            </a>
            <a href="">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhihu"></use>
                </svg>
            </a>
        </footer>

    </div>
    <p class="dowmloadResume-wrapper">
        <a class="dowmloadResume" href="./resume.pdf" target="_blank" download="">下载pdf</a>
    </p>
    <p class="selfIntroduction">
        庄海鑫, 在读大三学生，软件工程专业。<br>
        技能:HTML,CSS,JavaScript
    </p>
</main>

<section data-x class="skills " id="siteSkills">
    <h2>技能</h2>
    <ol class="clearfix">
        <li>
            <h3> HTML5&amp;CSS3</h3>
            <div class="progressBar">
                <div class="progress" style="width: 70%"></div>
            </div>
        </li>
        <li>
            <h3>JavaScript</h3>
            <div class="progressBar">
                <div class="progress " style="width: 65%"></div>
            </div>
        </li>
        <li>
            <h3> Jquery</h3>
            <div class="progressBar">
                <div class="progress" style="width: 50%"></div>
            </div>
        </li>
        <li>
            <h3> Vue.js</h3>
            <div class="progressBar">
                <div class="progress" style="width: 40%"></div>
            </div>
        </li>
        <li>
            <h3> React.js</h3>
            <div class="progressBar">
                <div class="progress" style="width: 30%"></div>
            </div>
        </li>
        <li>
            <h3> Node.js</h3>
            <div class="progressBar">
                <div class="progress" style="width: 20%"></div>
            </div>
        </li>

    </ol>
</section>
<section data-x class="portfolio " id="siteWorks">
    <h2>作品集</h2>
    <!--这就是view, 用户看得见的东西-->
    <!--  变成轮播 -->
    <!--mySlides  div就是init_swiper的view-->
    <div id="mySlides">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide work_1"></div>
                <div class="swiper-slide work_2"></div>
                <div class="swiper-slide work_3"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>


</section>
<section date-x class="messageBoard" id="siteMessage">
    <h2>留言板</h2>
    <form id="postMessageForm" class="postMessageForm">
        <label for="name">姓名</label>
        <input type="text" name="name" id="name">
        <label for="content">内容</label>
        <input type="text" name="content" id="content">
        <input type="submit" value="提交" class="button">
    </form>
    <ol class="messageList">

    </ol>

</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/r14/Tween.min.js"></script>
<script src="//at.alicdn.com/t/font_570364_i3lxcq9qo0kvs4i.js"></script>
<!-- 存储服务 -->
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.7.2/dist/av-min.js"></script>
<!--类-->
<script src="../dist/js/base/View.js"></script>
<script src="../dist/js/base/Model.js"></script>
<script src="../dist/js/base/Controller.js"></script>
<!--模块化-->
<script src="../dist/js/loading_animation.js"></script>
<script src="../dist/js/sticky.js"></script>
<script src="../dist/js/auto_slide_up.js"></script>
<script src="../dist/js/smoothly_navigation.js"></script>
<script src="../dist/js/navbar_animation.js"></script>
<script src="../dist/js/moudule1.js"></script>
<script src="../dist/js/moudule2.js"></script>
<script src="../dist/js/message.js"></script>
<script src="../dist/js/init_swiper.js"></script>
</body>
</html>
